<script lang="ts" setup>
import type { roleInfoType } from "_s/config/role/type";
// import { postAddRole, postEditRole } from "_s/config/user";
// const { notify } = useQuasar();
const diaload = defineModel<boolean>();
// const emits = defineEmits(["update"]);
const props = defineProps(["info"]);
const edit = ref(false);
import { QForm } from "quasar";

const form = ref({} as roleInfoType);

if (props.info) {
  edit.value = true;
  form.value = props.info;
}

const formRules = {
  name: [(val: string) => (val != null && val !== "") || "角色名不能为空"]
};

const formRef = useTemplateRef("formRef") as Ref<InstanceType<typeof QForm>>;
const submit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) return;
};

// const formRef = ref();
// const formRef = ref();

// const notifyFn = (code: ApiResponseData<null>["code"], msg: ApiResponseData<null>["msg"]) => {
//   if (code === 0) {
//     notify({
//       message: `${edit.value ? "编辑" : "新增"}成功`,
//       type: "success"
//     });
//     diaload.value = false;
//     emits("update");
//   } else {
//     notify({
//       message: msg,
//       type: "error"
//     });
//   }
// };

const cancel = () => {
  diaload.value = false;
};
</script>

<template>
  <q-card class="container q-pa-lg">
    <q-card-section>
      <div class="text-h6">{{ edit ? "编辑" : "新增" }}</div>
    </q-card-section>

    <q-form
      ref="formRef"
      @keyup.enter.prevent="submit"
      autocomplete="off"
    >
      <q-card-section>
        <div class="row justify-between">
          <q-input
            ref="name"
            v-model="form.name"
            outlined
            dense
            v-require
            class="input"
            label="角色名称"
            lazy-rules
            :rules="formRules.name"
          />
          <!-- <q-toggle v-if="!edit" v-model="form.status" :true-value="1" :false-value="0" :label="form.status === 1 ? '启用' : '禁用'" class="input q-pl-md q-mb-md" unchecked-icon="clear" checked-icon="check" /> -->
        </div>

        <div class="row justify-between"></div>

        <div class="row justify-between">
          <q-input
            v-model="form.remark"
            type="textarea"
            outlined
            dense
            class="full-width"
            label="备注"
          />
        </div>
      </q-card-section>
      <div class="text-center q-mt-lg">
        <q-btn
          unelevated
          color="primary"
          class="btn"
          :label="$t('pub.submit')"
          @click.prevent="submit"
        />
        <q-btn
          unelevated
          class="q-ml-sm btn"
          outline
          :label="$t('pub.cancel')"
          @click="cancel"
        />
        <!-- v-close-popup -->
      </div>
    </q-form>
  </q-card>
</template>

<style scoped lang="scss">
.container {
  width: 1050px;
  min-height: 250px;
}

.input {
  width: 220px;
}
.btn {
  width: 100px;
}
</style>
